import React, { useState } from 'react';

import { Card, Row, Col, ConfigProvider, Collapse, Tooltip } from 'antd';
import GradeComparison from './components/GradeComparison';
import MajorComparison from './components/MajorComparison';
import MutiMajorComparison from './components/MutiMajorComparison';
import styles from './index.less';

const { Panel } = Collapse;

const AnalysisAchievement: React.FC<any> = () => {
  return (
    <div>
      <div>
        <Card
          title={
            <span style={{ fontWeight: 'bold', fontSize: 18 }}>
              学生成绩分析
            </span>
          }
        >
          <Row gutter={8}>
            <Col span={12}>
              <Collapse defaultActiveKey={['1']}>
                <Panel
                  key="1"
                  header={
                    <Tooltip title="对比所带专业各班级专业排名靠前人数与班级人数的占比及人数">
                      <div>班级间学生成绩对比</div>
                    </Tooltip>
                  }
                >
                  <ConfigProvider>
                    <GradeComparison />
                  </ConfigProvider>
                </Panel>
              </Collapse>
            </Col>
            <Col span={12}>
              <Collapse defaultActiveKey={['1']}>
                <Panel
                  forceRender
                  key="1"
                  header={
                    <Tooltip title="对比所带专业各班级学分绩点情况">
                      <div>班级学分绩点对比</div>
                    </Tooltip>
                  }
                >
                  <ConfigProvider>
                    <MajorComparison />
                  </ConfigProvider>
                </Panel>
              </Collapse>
            </Col>
          </Row>
        </Card>
      </div>
      <div className={styles.bar}>
        <Card>
          <Row gutter={8}>
            <Col span={12}>
              <Collapse defaultActiveKey={['1']}>
                <Panel
                  key="1"
                  header={
                    <Tooltip title="对比所带专业学分绩点与往届专业学分绩点">
                      <div>往届专业学分绩点对比</div>
                    </Tooltip>
                  }
                >
                  <ConfigProvider>
                    <MutiMajorComparison />
                  </ConfigProvider>
                </Panel>
              </Collapse>
            </Col>
          </Row>
        </Card>
      </div>
    </div>
  );
};
export default AnalysisAchievement;
